// 创建一个路由器 并暴露出去

// 第一步 引入createRouter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 第三步  引入一个个可能要呈现的组件
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import News from '../components/News.vue'
import Deatil from '../components/Detail.vue'

// 第二步： 创建路由器
const router = createRouter({
    // vue2中创建VueRouter实例是通过new VueRouter()实现的，而Vue是通过调用createRouter()方法
    history: createWebHistory(),     // history工作模式
    // history:createWebHashHistory(),     // hash工作模式
    //路由器工作模式有两种
    //  1、history模式
    //     优点：Url更加美观，不带#，更接近传统网站url
    //     缺点:后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误
    //  2、hash模式
    //     优点：兼容性更好，因为不需要服务器端处理路径
    //     缺点：Url带有#不美观，且在SEO优化方面比较差 


    routes: [{   //一个一个的路由规则
        name: 'zhuye',    //对路由进行命名
        path: '/home',    //路由的url
        component: Home   // 对应要展示的组件
    }, {
        name: 'guanyu',
        path: '/about',
        component: About
    }, {
        name: 'xinwen',
        path: '/news',
        component: News,
        children: [
            {
                name: 'xiangqing',
                path: 'detail',   //子集下面不需要写'/'
                component: Deatil,
            }
        ]
    }]
})

export default router
